<template>
  <div :id="chartName" class="charts"></div>
</template>

<script>
export default {
  name: "echart",
};
</script>
<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  chartName: {
    type: String,
    default: "loading",
  },
  options: {
    type: Object,
    default: () => {},
  },
});

const init = () => {
  const chart = echarts.init(document.getElementById(props.chartName));
  chart.setOption(props.options);
  // 柱状图交互
  if (props.chartName === "barChart") {
    const zoomSize = 6;
    chart.on("click", function (params) {
      chart.dispatchAction({
        type: "dataZoom",
        startValue:
          props.options.xAxis.data[
            Math.max(params.dataIndex - zoomSize / 2, 0)
          ],
        endValue:
          props.options.xAxis.data[
            Math.min(
              params.dataIndex + zoomSize / 2,
              props.options.series[0].data.length - 1
            )
          ],
      });
    });
  }
};

onMounted(() => {
  init();
});
</script>

<style scoped lang="scss">
.charts {
  width: 100%;
  height: 100%;
}
</style>